{__NOLAYOUT__}
<!DOCTYPE html>
<html lang="en">
<head>
    {include file="public/head" title="$templateTitle" /}
    <link href="__PUBLIC__/coverEye/style.css" rel="stylesheet">
</head>
<body>
    <div class="container-fluid">
        <div class="row" style="margin-top: 200px;">
            <div class="col-xs-offset-4 col-xs-4" id="animal">
                <DIV style="width: 165px; height: 96px; position: absolute;left:77%">
                    <DIV class="tou"></DIV>
                    <DIV class="initial_left_hand" id="left_hand"></DIV>
                    <DIV class="initial_right_hand" id="right_hand"></DIV>
                </DIV>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-offset-3 col-xs-3"style="margin-left: 57%">
                <form class="form-horizontal form-validate" id="form-admin-login">
                    <div class="form-group">
                        <div class="col-xs-offset-1 col-xs-10">
                            <input type="text" name="username" class="form-control" placeholder="请输入用户名" autocomplete="off"
                                   data-rule-required="true" data-msg-required="请输入用户名">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-xs-offset-1 col-xs-10">
                            <input type="password" class="form-control" name="password" id="password" placeholder="请输入登录密码" autocomplete="off"
                                   data-rule-required="true" data-msg-required="请输入登录密码">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-xs-offset-1 col-xs-10">
                            <div class="input-group">
                                <input type="text" class="form-control" name="captcha"
                                       placeholder="请输入验证码">
                                <span class="input-group-addon" style="padding: 0;">
                                    <img src="{:captcha_src()}" style="height: 30px;" alt="captcha" onclick="this.src='{:captcha_src()}'" />
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-xs-offset-2 col-xs-8">
                            <button type="button" class="btn btn-block btn-success" onclick="ajaxSubmit('form-admin-login')">登录</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    {include file="public/scripts" /}
</body>

<script>
    $(function () {

        // 密码元素
        var passwordElement = $('#password');
        // 左手
        var leftHand = $('#left_hand');
        // 右手
        var rightHand = $('#right_hand');

        //得到焦点
        passwordElement.focus(function () {
            leftHand.animate({
                left: "150",
                top: "-30"
            }, {
                step: function () {
                    if (parseInt(leftHand.css("left")) > 140)
                    {
                        leftHand.attr("class", "left_hand");
                    }
                }
            }, 2000);
            rightHand.animate({
                right: "-64",
                top: "-30"
            }, {
                step: function () {
                    if (parseInt(rightHand.css("right")) > -70) {
                        rightHand.attr("class", "right_hand");
                    }
                }
            }, 2000);
        });

        // 失去焦点
        passwordElement.blur(function () {
            leftHand.attr("class", "initial_left_hand");
            leftHand.attr("style", "left:100px;top:-12px;");
            rightHand.attr("class", "initial_right_hand");
            rightHand.attr("style", "right:-112px;top:-12px");
        });
    });
</script>
</html>